<div id="container1" style="width:960px; background-color: #efefef;">
    <div class="xsui-draggable xsui-color-red">
        <ul class="ui-helper-reset">
            <li class="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" invoked <span class="count">0</span>x</li>
            <li class="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" invoked <span class="count">0</span>x</li>
            <li class="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" invoked <span class="count">0</span>x</li>
        </ul>
    </div>
    <div class="xsui-draggable xsui-color-green">
        <ul class="ui-helper-reset">
            <li class="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" invoked <span class="count">0</span>x</li>
            <li class="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" invoked <span class="count">0</span>x</li>
            <li class="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" invoked <span class="count">0</span>x</li>
        </ul>
    </div>
    <div class="xsui-draggable xsui-color-blue">
        <ul class="ui-helper-reset">
            <li class="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" invoked <span class="count">0</span>x</li>
            <li class="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" invoked <span class="count">0</span>x</li>
            <li class="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" invoked <span class="count">0</span>x</li>
        </ul>
    </div>
    <div class="xsui-draggable xsui-color-red">
        <ul class="ui-helper-reset">
            <li class="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" invoked <span class="count">0</span>x</li>
            <li class="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" invoked <span class="count">0</span>x</li>
            <li class="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" invoked <span class="count">0</span>x</li>
        </ul>
    </div>
    <div class="xsui-draggable xsui-color-green">
        <ul class="ui-helper-reset">
            <li class="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" invoked <span class="count">0</span>x</li>
            <li class="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" invoked <span class="count">0</span>x</li>
            <li class="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" invoked <span class="count">0</span>x</li>
        </ul>
    </div>
    <div class="xsui-draggable xsui-color-blue">
        <ul class="ui-helper-reset">
            <li class="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" invoked <span class="count">0</span>x</li>
            <li class="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" invoked <span class="count">0</span>x</li>
            <li class="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" invoked <span class="count">0</span>x</li>
        </ul>
    </div>
</div>
<style type="text/css">
    .xsui-draggable { width:200px; height:200px;}
</style>
<script type="text/javascript">
    $(function () {

        var counts = [0, 0, 0];

        $(".xsui-draggable").draggable({
            scroll: true,
            containment: "#container1",
            start: function () {
                counts[ 0 ]++;
                updateCounterStatus($(".xsui-draggable .event-start"), counts[ 0 ]);
            },
            drag: function () {
                counts[ 1 ]++;
                updateCounterStatus($(".xsui-draggable .event-drag"), counts[ 1 ]);
            },
            stop: function () {
                counts[ 2 ]++;
                updateCounterStatus($(".xsui-draggable .event-stop"), counts[ 2 ]);
            }
        });

        function updateCounterStatus($event_counter, new_count) {
            // first update the status visually...
            if (!$event_counter.hasClass("ui-state-hover")) {
                $event_counter.addClass("ui-state-hover")
                        .siblings().removeClass("ui-state-hover");
            }
            // ...then update the numbers
            $("span.count", $event_counter).text(new_count);
        }
    });
</script>